<!doctype html>
<html>
 <head>
  <!--声明当前页码的编码集：charset=gbk,gb2312(中文编码),utf-8(国际编码)-->
	<meta http-equiv="content-Type" content="text/html;charset=utf-8">
	<!--当前页面的三要素-->
	<title>html模板</title>
	<meta name="keywords" content="关键词,关键词">
	<meta name="description" content="">
	<!--css,js-->
	<style type="text/css">
	*{margin:0;padding:0}
	body{font-size:12px;font-family:"微软雅黑";color:#000;}
	img{border:0}
	.div{position:absolute;left:0;top:0;shadow:3px 3px 1em #141414;width:300px;}
	.turn-left{height:200px;position:absolute;z-index:10;width:32%;left:19%}
	.turn-right{height:200px;position:absolute;z-index:10;width:32%;right:14%}
	</style>
	<link href="css/animate.css" rel="stylesheet" type="text/css" />

 <body>
	<div style="margin:0 auto;width:360px;border:1px solid red">
		<div style="position:relative;">
			<div class="turn-left"></div>
			<div class="imgbox">
				<div class="div"><img src="images/220-1.jpg"/></div>
				<div class="div"><img src="images/220-2.jpg"/></div>
				<div class="div"><img src="images/220-3.png"/></div>
				<div class="div"><img src="images/220-4.jpg"/></div>
			</div>
			<div class="turn-right"></div>
		</div>
	</div>
	<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
	<script type="text/javascript">
		$(function(){
			var z = -1;
			var length = $(".imgbox >.div").length;
			var index = length;
			$(".turn-right").on("click",function(){
				if(index<=0)index = length;
				index--;
				var $div = $(".div").eq(index);
				var left = $div.offset().left;
				var pleft = $div.position().left;
				$div.animate({left:left},function(){$(this).css("zindex",zindex--)}).animate({left:pleft});
			});

			$(".turn-left").on("click",function(){
				if(index<=0)index = length;
				index--;
				var $div = $(".div").eq(index);
				var left = $div.offset().left;
				var pleft = $div.position().left;
				$div.animate({left:0},function(){$(this).css("zindex",zindex--)}).animate({left:pleft});
			});		
		})

		$(function(){
			//$.fx.speeds.keke = 300;
			var zindex = -1;
			$(".div").click(function(){
				var width = $(this).parent().width();
				$(this).animate({"left":width+"px"},500,function(){
					$(this).css("zindex",zindex--);
				}).delay(100).animate({left:0},500);
			});
		});
	</script>
  
 </body>
</html>